<template>
  <el-form ref="form" :model="form" :rules="rules" :hide-required-asterisk="true" label-position="left" style="width:550px;margin: 0 auto;">
    <el-form-item :label="$t('应用名称')" :label-width="formLabelWidth" prop="name" @input="updateView($event)">
      <el-input v-emoji size='small' v-model="form.name" autocomplete="off" ref="name" :style="lang==='zh'? 'width:260px':'width:370px'"></el-input>
    </el-form-item>
    <el-form-item :label="$t('应用类型')" :label-width="formLabelWidth">
      <el-radio v-model="form.app_type" label="white" :disabled='policyType === "blacklist"' class="typeWhite">{{$t('白名单')}}</el-radio>
      <el-radio v-model="form.app_type" label="black" :disabled='policyType === "whitelist"' class="typeBlack">{{$t('黑名单')}}</el-radio>
      <el-radio v-model="form.app_type" label="any" class="typeAny">{{$t('任意')}}</el-radio>
    </el-form-item>

    <el-form-item :label="$t('IP类型')" :label-width="formLabelWidth">
      <el-radio v-model="form.proto_l2" label="ipv4" class="protoIPv4">IPv4</el-radio>
      <el-radio v-model="form.proto_l2" label="ipv6" class="protoIPv6">IPv6</el-radio>
      <el-radio v-model="form.proto_l2" label="any" class="protoAny">{{$t('任意')}}</el-radio>
    </el-form-item>

    <el-form-item :label="$t('协议类型')" :label-width="formLabelWidth">
      <el-radio v-model="form.proto_l3" label="tcp" class="proto13Tcp">TCP</el-radio>
      <el-radio v-model="form.proto_l3" label="udp" class="proto13Udp">UDP</el-radio>
      <el-radio v-model="form.proto_l3" label="any" class="proto13Any">{{$t('任意')}}</el-radio>
    </el-form-item>

    <el-form-item :label="$t('源端口号')" prop="src_port" :label-width="formLabelWidth" @input="updateView($event)">
      <el-input v-emoji size='small' :style="lang==='zh'? 'width:260px':'width:370px'" :placeholder="$t('如：1521 或1521-2521')" v-model="form.src_port" ref="src_port">
      </el-input>
    </el-form-item>

    <el-form-item :label="$t('目的端口号')" prop="dst_port" :label-width="formLabelWidth" @input="updateView($event)">
      <el-input v-emoji size='small' :style="lang==='zh'? 'width:260px':'width:370px'" :placeholder="$t('如：1521 或1521-2521')" v-model="form.dst_port" ref="dst_port">
      </el-input>
    </el-form-item>

    <el-form-item :label="$t('特征偏移量')" prop="feature_offset" :label-width="formLabelWidth" @input="updateView($event)">
      <el-input v-emoji size='small' :style="lang==='zh'? 'width:260px':'width:370px'" v-model="form.feature_offset" ref="feature_offset">
      </el-input>
    </el-form-item>

    <el-form-item :label="$t('数据特征')" prop="feature" :label-width="formLabelWidth" @input="updateView($event)">
      <el-input v-emoji size='small' :style="lang==='zh'? 'width:260px':'width:370px'" :placeholder="$t('请按十六进制码存储，例如：00112233')" v-model="form.feature" ref="feature">
      </el-input>
    </el-form-item>

  </el-form>
</template>

<script>
import { inputClass } from '@/utils/input-class.js'
export default {
  props: [
    'dialogFormVisible',
    'type_info',
    'edit_form',
    'policyType'
  ],
  name: 'AddrGroupEdit',
  data () {
    var validateName = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请输入对象名称')))
      } else if (value.length > 127) {
        callback(new Error(this.$t('输入内容不应超出长度 127 个字节')))
      } else {
        callback()
      }
    }
    var validatePort = (rule, value, callback) => {
      if (value) {
        if (Number(value) > 65535 || Number(value) < 0) {
          callback(new Error(this.$t('端口的范围为0~65535')))
        } else if (value.indexOf('-') > -1 && value.split('-').length > 2) {
          callback(new Error(this.$t('输入端口的格式错误')))
        } else if (value.indexOf('-') > -1) {
          let item = value.split('-')
          if (isNaN(Number(item[0])) || isNaN(Number(item[1]))) {
            callback(new Error(this.$t('请输入数字')))
          } else if (Number(item[0]) > 65535 || Number(item[0]) < 0 || Number(item[1]) > 65535 || Number(item[1]) < 0) {
            callback(new Error(this.$t('端口的范围为0~65535')))
          } else {
            callback()
          }
        } else if (isNaN(Number(value))) {
          callback(new Error(this.$t('请输入数字')))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validateFeatureOffset = (rule, value, callback) => {
      if (value) {
        if (isNaN(Number(value))) {
          callback(new Error(this.$t('请输入数字')))
        } else if (Number(value) > 65535 || Number(value) < 0) {
          callback(new Error(this.$t('端口的范围为0~65535')))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validateFeature = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else if (value.length > 127) {
        callback(new Error(this.$t('输入内容不应超出长度 127 个字节')))
      } else if (Number(value) < 0) {
        callback(new Error(this.$t('只能输入正数')))
      } else {
        callback()
      }
    }
    return {
      lang: this.$i18n.locale,
      old_name: {},
      old_desc: '',
      form: {
        name: '',
        app_type: 'white',
        proto_l2: 'ipv4',
        proto_l3: 'tcp',
        src_port: '',
        dst_port: '',
        feature_offset: '',
        feature: ''
      },
      rules: {
        name: [{ required: false, validator: validateName, trigger: 'blur' }],
        src_port: [{ required: false, validator: validatePort, trigger: 'blur' }],
        dst_port: [{ required: false, validator: validatePort, trigger: 'blur' }],
        feature_offset: [{ required: false, validator: validateFeatureOffset, trigger: 'blur' }],
        feature: [{ required: false, validator: validateFeature, trigger: 'blur' }]
      },
      formLabelWidth: this.$i18n.locale === 'zh' ? '80px':'160px'
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        if (this.type_info === '编辑') {
          this.form = val
          this.old_name = val.name
          this.old_desc = val.desc
        }
      },
      immediate: true
    }
  },
  methods: {
    // 发送form表单数据到父组件
    send_form () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let childForm = {}
          childForm = this.form
          if (!childForm.name) {
            this.$messages.error(this.$t('请输入名称'))
            return
          }
          if (this.type_info === '编辑') {
            childForm.old_name = this.old_name
          }
          this.$emit('childForm', childForm)
        }
      })
    },
    closeDialog () {
      this.form = {
        app_type: 'white',
        proto_l2: 'ipv4',
        proto_l3: 'tcp'
      }
      this.old_name = {}
      this.old_desc = ''
      this.$refs.form.resetFields()
    },
    updateView (e) {
      this.$forceUpdate()
    },
    add_addr () {
      this.dialogAddrFormVisible = true
    },
    backParent () {
      this.$emit('quxiao', false)
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    close () {
      this.form = {
        name: '',
        app_type: 'white',
        proto_l2: 'ipv4',
        proto_l3: 'tcp',
        src_port: '',
        dst_port: '',
        feature_offset: '',
        feature: ''
      }
      this.old_name = {}
      this.old_desc = ''
      this.$refs.form.resetFields()
    },
    classRef () {
      const data = ['name', 'src_port', 'dst_port', 'feature_offset', 'feature']
      inputClass(this.$refs, data)
    },
    initType () {
      this.form.app_type = this.policyType === 'blacklist' ? 'black' : 'white'
    }
  }
}
</script>

<style scoped>
.tools_box {
  text-align: left;
}
.circle {
  padding: 5px;
}
</style>
